<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>树形下拉选择器</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link href="../../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <script src="assets/layui/layui.js"></script>
</head>
<body style="padding: 25px;">
   <div  class="layui-container layui-form">
       <div class="layui-form-item">
           <label for="" class="layui-form-label">测试</label>
           <div class="layui-input-block">
               <input type="text" id="tree" lay-filter="tree" class="layui-input">
           </div>
       </div>
       <div class="layui-form-item">
           <label for="" class="layui-form-label">测试2</label>
           <div class="layui-input-block">
               <input type="text" id="tree2" lay-filter="tree2" class="layui-input">
           </div>
       </div>
       <div>
       	<i class="layui-icon layui-icon-reply-fill" />
<i class="layui-icon layui-icon-set-fill" />
<i class="layui-icon layui-icon-menu-fill" />
<i class="layui-icon layui-icon-search" />
<i class="layui-icon layui-icon-share" />
<i class="layui-icon layui-icon-set-sm" />
<i class="layui-icon layui-icon-engine" />
<i class="layui-icon layui-icon-close" />
<i class="layui-icon layui-icon-close-fill" />
<i class="layui-icon layui-icon-chart-screen" />
<i class="layui-icon layui-icon-star" />
<i class="layui-icon layui-icon-circle-dot" />
<i class="layui-icon layui-icon-chat" />
<i class="layui-icon layui-icon-release" />
<i class="layui-icon layui-icon-list" />
<i class="layui-icon layui-icon-chart" />
<i class="layui-icon layui-icon-ok-circle" />
<i class="layui-icon layui-icon-layim-theme" />
<i class="layui-icon layui-icon-table" />
<i class="layui-icon layui-icon-right" />
<i class="layui-icon layui-icon-left" />
<i class="layui-icon layui-icon-cart-simple" />
<i class="layui-icon layui-icon-face-cry" />
<i class="layui-icon layui-icon-face-smile" />
<i class="layui-icon layui-icon-survey" />
<i class="layui-icon layui-icon-tree" />
<i class="layui-icon layui-icon-upload-circle" />
<i class="layui-icon layui-icon-add-circle" />
<i class="layui-icon layui-icon-download-circle" />
<i class="layui-icon layui-icon-templeate-1" />
<i class="layui-icon layui-icon-util" />
<i class="layui-icon layui-icon-face-surprised" />
<i class="layui-icon layui-icon-edit" />
<i class="layui-icon layui-icon-speaker" />
<i class="layui-icon layui-icon-down" />
<i class="layui-icon layui-icon-file" />
<i class="layui-icon layui-icon-layouts" />
<i class="layui-icon layui-icon-rate-half" />
<i class="layui-icon layui-icon-add-circle-fine" />
<i class="layui-icon layui-icon-prev-circle" />
<i class="layui-icon layui-icon-read" />
<i class="layui-icon layui-icon-404" />
<i class="layui-icon layui-icon-carousel" />
<i class="layui-icon layui-icon-help" />
<i class="layui-icon layui-icon-code-circle" />
<i class="layui-icon layui-icon-water" />
<i class="layui-icon layui-icon-username" />
<i class="layui-icon layui-icon-find-fill" />
<i class="layui-icon layui-icon-about" />
<i class="layui-icon layui-icon-location" />
<i class="layui-icon layui-icon-up" />
<i class="layui-icon layui-icon-pause" />
<i class="layui-icon layui-icon-date" />
<i class="layui-icon layui-icon-layim-uploadfile" />
<i class="layui-icon layui-icon-delete" />
<i class="layui-icon layui-icon-play" />
<i class="layui-icon layui-icon-top" />
<i class="layui-icon layui-icon-friends" />
<i class="layui-icon layui-icon-refresh-3" />
<i class="layui-icon layui-icon-ok" />
<i class="layui-icon layui-icon-layer" />
<i class="layui-icon layui-icon-face-smile-fine" />
<i class="layui-icon layui-icon-dollar" />
<i class="layui-icon layui-icon-group" />
<i class="layui-icon layui-icon-layim-download" />
<i class="layui-icon layui-icon-picture-fine" />
<i class="layui-icon layui-icon-link" />
<i class="layui-icon layui-icon-diamond" />
<i class="layui-icon layui-icon-log" />
<i class="layui-icon layui-icon-rate-solid" />
<i class="layui-icon layui-icon-fonts-del" />
<i class="layui-icon layui-icon-unlink" />
<i class="layui-icon layui-icon-fonts-clear" />
<i class="layui-icon layui-icon-triangle-r" />
<i class="layui-icon layui-icon-circle" />
<i class="layui-icon layui-icon-radio" />
<i class="layui-icon layui-icon-align-center" />
<i class="layui-icon layui-icon-align-right" />
<i class="layui-icon layui-icon-align-left" />
<i class="layui-icon layui-icon-loading-1" />
<i class="layui-icon layui-icon-return" />
<i class="layui-icon layui-icon-fonts-strong" />
<i class="layui-icon layui-icon-upload" />
<i class="layui-icon layui-icon-dialogue" />
<i class="layui-icon layui-icon-video" />
<i class="layui-icon layui-icon-headset" />
<i class="layui-icon layui-icon-cellphone-fine" />
<i class="layui-icon layui-icon-add-1" />
<i class="layui-icon layui-icon-face-smile-b" />
<i class="layui-icon layui-icon-fonts-html" />
<i class="layui-icon layui-icon-form" />
<i class="layui-icon layui-icon-cart" />
<i class="layui-icon layui-icon-camera-fill" />
<i class="layui-icon layui-icon-tabs" />
<i class="layui-icon layui-icon-fonts-code" />
<i class="layui-icon layui-icon-fire" />
<i class="layui-icon layui-icon-set" />
<i class="layui-icon layui-icon-fonts-u" />
<i class="layui-icon layui-icon-triangle-d" />
<i class="layui-icon layui-icon-tips" />
<i class="layui-icon layui-icon-picture" />
<i class="layui-icon layui-icon-more-vertical" />
<i class="layui-icon layui-icon-flag" />
<i class="layui-icon layui-icon-loading" />
<i class="layui-icon layui-icon-fonts-i" />
<i class="layui-icon layui-icon-refresh-1" />
<i class="layui-icon layui-icon-rmb" />
<i class="layui-icon layui-icon-home" />
<i class="layui-icon layui-icon-user" />
<i class="layui-icon layui-icon-notice" />
<i class="layui-icon layui-icon-login-weibo" />
<i class="layui-icon layui-icon-voice" />
<i class="layui-icon layui-icon-upload-drag" />
<i class="layui-icon layui-icon-login-qq" />
<i class="layui-icon layui-icon-snowflake" />
<i class="layui-icon layui-icon-file-b" />
<i class="layui-icon layui-icon-template" />
<i class="layui-icon layui-icon-auz" />
<i class="layui-icon layui-icon-console" />
<i class="layui-icon layui-icon-app" />
<i class="layui-icon layui-icon-prev" />
<i class="layui-icon layui-icon-website" />
<i class="layui-icon layui-icon-next" />
<i class="layui-icon layui-icon-component" />
<i class="layui-icon layui-icon-more" />
<i class="layui-icon layui-icon-login-wechat" />
<i class="layui-icon layui-icon-shrink-right" />
<i class="layui-icon layui-icon-spread-left" />
<i class="layui-icon layui-icon-camera" />
<i class="layui-icon layui-icon-note" />
<i class="layui-icon layui-icon-refresh" />
<i class="layui-icon layui-icon-female" />
<i class="layui-icon layui-icon-male" />
<i class="layui-icon layui-icon-password" />
<i class="layui-icon layui-icon-senior" />
<i class="layui-icon layui-icon-theme" />
<i class="layui-icon layui-icon-tread" />
<i class="layui-icon layui-icon-praise" />
<i class="layui-icon layui-icon-star-fill" />
<i class="layui-icon layui-icon-rate" />
<i class="layui-icon layui-icon-template-1" />
<i class="layui-icon layui-icon-vercode" />
<i class="layui-icon layui-icon-cellphone" />
<i class="layui-icon layui-icon-screen-full" />
<i class="layui-icon layui-icon-screen-restore" />
<i class="layui-icon layui-icon-cols" />
<i class="layui-icon layui-icon-export" />
<i class="layui-icon layui-icon-print" />
<i class="layui-icon layui-icon-slider" />
       </div>
   </div>

    <script>
    
    layui.config({
        base: './module/'
    }).extend({
        treeSelect: 'treeSelect/treeSelect'
    });
    
    layui.use(['treeSelect','form'], function () {
        var treeSelect= layui.treeSelect;

        treeSelect.render({
            // 选择器
            elem: '#tree',
            uri: 'data/data3.json',
            // 数据
            data: '',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '修改默认提示信息',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
//                选中节点，根据id筛选
//                treeSelect.checkNode('tree', 3);

//                获取zTree对象，可以调用zTree方法
//                var treeObj = treeSelect.zTree('tree');
//                console.log(treeObj);

//                刷新树结构
//                treeSelect.refresh();
            }
        });

        treeSelect.render({
            // 选择器
            elem: '#tree2',
            // 数据
            data: 'data/data3.json',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '占位符',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
                console.log(d);
//                选中节点，根据id筛选
//                treeSelect.checkNode('tree', 3);

//                获取zTree对象，可以调用zTree方法
//                var treeObj = treeSelect.zTree('tree');
//                console.log(treeObj);

//                刷新树结构
//                treeSelect.refresh();
            }
        });



        
    });
    </script>
</body>
</html>